<template>
  <div class="container">
    <!-- 上面一个长方形 -->
    <el-row type="flex" justify="center">
      <transition name="slide-fade">
        <el-col :span="20">
          <div class="grid-content bg-purple-dark">
            在健康与希望的交汇处，希望站应运而生。我们是一个专注于中医领域的公益智慧医疗平台，致力于汇聚全球优秀的中医医生和传统药方资源，为每一位患者提供便捷、高效、公益的医疗服务。
          </div>
        </el-col>
      </transition>
    </el-row>

    <!-- 下面四个长方形 -->
    <el-row type="flex" justify="center">
      <transition name="slide-fade">
        <el-col :span="13">
          <div class="grid-content bg-purple-light">
            希望站始终秉持公益初心，致力于为患者提供免费的医疗信息查询服务，帮助患者减轻经济负担，让优质的中医资源触手可及。在这里，无论是疾病咨询、医馆查询，还是治疗方案的分享与交流，都无需支付任何费用，因为我们相信，健康是每个人的权利，而不是奢侈品。
          </div>
        </el-col>
      </transition>
      <transition name="slide-fade">
        <el-col :span="7">
          <div class="grid-content bg-purple">公益使命,温暖每一颗心</div>
        </el-col>
      </transition>
    </el-row>
    <el-row type="flex" justify="center">
      <transition name="slide-fade">
        <el-col :span="7">
          <div class="grid-content bg-purple">智慧服务,便捷触手可及</div>
        </el-col>
      </transition>
      <transition name="slide-fade">
        <el-col :span="13">
          <div class="grid-content bg-purple-light">
            您可以通过我们的网站轻松查询全球优质中医医馆，获取详细的医馆信息、医生介绍和患者评价；也可以在线搜索经过专家审核的中医验方，了解其适应症状、使用方法和注意事项。此外，我们还提供在线上传和分享治疗方案的功能，共同构建一个温暖的中医公益社区。
          </div>
        </el-col>
      </transition>
    </el-row>
  </div>
</template>
<style lang="scss">
.container {
  padding: 20px;
  max-width: 1200px; // 设置最大宽度以控制容器宽度
  margin: auto; // 让容器水平居中
}

.el-row {
  margin-bottom: 20px;
  display: flex; // 确保row是flex容器
  justify-content: center; // 水平居中其子元素
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 250px; // 调整高度以适应布局
  display: flex;
  justify-content: center; // 水平居中文本
  align-items: center; // 垂直居中文本
  color: white;
  font-size: 14px;
  overflow: hidden; /* 隐藏溢出的内容 */
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #6495ED;
}

.bg-purple-light {
  background: #e5e9f2;
  color: black; // 因为浅色背景，文字颜色调整为黑色以便阅读
}

/* 定义新的过渡类 */
.slide-fade-enter-active {
  transition: all 1s ease-in-out;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    animation: slideFade 1s forwards;
  }
}

@keyframes slideFade {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-fade-leave-active {
  transition: opacity 1s ease;
}

.slide-fade-enter, .slide-fade-leave-to {
  opacity: 0;
}
</style>

<script>
export default {
  mounted() {
    this.checkVisibility();
    window.addEventListener('scroll', this.checkVisibility);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.checkVisibility);
  },
  methods: {
    checkVisibility() {
      const elements = this.$el.querySelectorAll('.grid-content');
      elements.forEach((element) => {
        const rect = element.getBoundingClientRect();
        const isVisible = (rect.top <= window.innerHeight && rect.bottom >= 0);
        if (isVisible) {
          element.classList.add('slide-fade-enter-active');
        } else {
          element.classList.remove('slide-fade-enter-active');
        }
      });
    }
  }
};
</script>